window.addEventListener('load',function(){
    let prev =document.querySelector(".prev");
    let next = this.document.querySelector(".next");
    let wrapper = document.getElementById("wrapper");
let width = wrapper.offsetWidth;
// 鼠标经过就显示出来
    this.wrapper.addEventListener('mouseenter',function(){
        prev.style.display = 'block';
        next.style.display = 'block';
        //清除自动播放轮播图
        clearInterval(timer);
        timer = null;
    })
    this.wrapper.addEventListener('mouseleave',function(){
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = setInterval(function(){
            next.click();//手动调用点击事件
    
        },2000);
    })
    //动态生成小圆圈，有几张图片，就生成几个小圆圈
    // let ul = this.document.uerySelector('.ul');
    let ul = wrapper.querySelector('ul');
    let ol = wrapper.querySelector('ol');
    for(let i =0;i<ul.children.length;i++){
        //创建li 
        let li = this.document.createElement('li');
        //创建索引号
        li.setAttribute('index',i);
       //把li插入到ol里面
        ol.appendChild(li);
        li.addEventListener('click',function(){
            //小圆圈的排他思想
            for(let i = 0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            //谁调用该函数，this就指向谁
            this.className = 'current';
            //点击小圆圈，移动的是ul,
             let index = this.getAttribute('index');
             num = index;
             circle = index;
            animate(ul, -1520*index);
        })
        
      
    }  
    //把ol里面的第一个li设置类名为current
    ol.children[0].className='current';
    //克隆第一张图片(li) 放到li的最后面
    let first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    let num=0;
    let circle =0;
    next.addEventListener('click',function(){
        if(num==ul.children.length-1){
            ul.style.left = 0;
            num=0;
        }
        num++;
        animate(ul,-num*width);
        circle++;
        if(circle == ol.children.length){
            circle = 0;
        }
        //先清除其他小圆圈的current类名
        for(let i =0 ; i<ol.children.length;i++){
            ol.children[i].className = '';

        }
        ol.children[circle].className = 'current';
    })
    prev.addEventListener('click',function(){
        if(num==0){
            num  = ul.children.length-1;
            ul.style.left = -1520*num;
        }
        num--;
        animate(ul,-num*width);
        circle--;
        if(circle <0){
            circle = ol.children.length-1;
        }
        //先清除其他小圆圈的current类名
        for(let i =0 ; i<ol.children.length;i++){
            ol.children[i].className = '';

        }
        ol.children[circle].className = 'current';
    })
    //自动播放轮播图
    let timer = this.setInterval(function(){
        next.click();//手动调用点击事件

    },2000);


    
})